<template>
  <s-layout id="layout" navbar="normal" :title="'班次详情'"  :autoBack="true" 
  :leftIconColor="`${headstate.color}`"  :bgColor="headstate.bgColor" 
  :titleStyle="{ color: `${headstate.color}`, fontSize: '32rpx',fontWeight:'600',zIndex:'99999' }" 
  :onShareAppMessage="shareInfo">
    <view id="app"
      :style="{ overflow: `hidden`, backgroundImage: `url( ${baseUrl}/uploads/uniapp_image/staff_v1/bancixiangqing_bg@2.png)` }">

      <!-- 第一块盒子 -->
      <view class="area job_information_box" v-if="details">
        <view class="classes_time_box">
          <view class="image">
            <image :src="`${baseUrl}/uploads/uniapp_image/staff_v1/project_paiban2@2.png`" mode="scaleToFill" />
          </view>
          <view class="edge_distance">早班-长期</view>
          <view>班次时间：{{ details.start_time }} - {{ details.end_time }}</view>
        </view>

        <view class="message_box">
          <view class="message">

            <view class="message_title">{{ details.title }}</view>

            <view class="message_item">
              <view class="gray">班次时间：</view>
              <view class="blue">{{ details.date }} （{{ details.start_time }} - {{ details.end_time }}）</view>
            </view>

            <view class="message_item">
              <view class="gray">代理金额：</view>
              <view><text class="blue distance">男 ￥{{ details.agent_man_salary }}</text><text class="orange">女 ￥{{
                details.agent_woman_salary }}</text></view>
            </view>

            <view class="message_item">
              <view class="gray">排班状态：</view>
              <view :style="{ color: state_arr[details.state].color }">{{ state_arr[details.state].title }}</view>
            </view>

            <view class="message_item">
              <view class="gray">需求人数：</view>
              <view class="demand_people">
                <view>
                  <text class="blue margin_left">{{ details.man_apply_total }}</text>
                  <text class="light_grey margin_left"> / </text>
                  <text class="black margin_left">{{ details.man_num }}</text>
                  <text class="light_grey margin_left">(男)</text>
                </view>
                <view>
                  <text class="orange margin_left">{{ details.woman_apply_total }}</text>
                  <text class="light_grey margin_left">/</text>
                  <text class="black margin_left">{{ details.woman_num }}</text>
                  <text class="light_grey margin_left">(女)</text>
                </view>
              </view>
              <view class="message_image" @tap="editagency(details)">
                <image :src="`${baseUrl}/uploads/uniapp_image/staff_v1/shangjixiangqing_icon_xiugaijine@2.png`"
                  mode="scaleToFill" />
                <view class="blue">修改</view>
              </view>
            </view>

          </view>
          <view class="quantity">
            <view v-for="(item, index) of tabs" :key="index" class="tabs_box">
              <view class="tabs_num">{{ item.num }}</view>
              <view class="tabs_title">{{ item.title }}</view>
            </view>
          </view>
        </view>
      </view>

      <!-- 第二块盒子 -->
      <view class="area button_box">
        <view class="buttons">
          <view class="buttons_item" v-for="i in buttonTabs" :key="i.value" @tap="clickEvent(i.value)">
            <image :src="`${baseUrl}/uploads/uniapp_image/staff/` + i.src" mode="scaleToFill" />
            <view class="text"> {{ i.title }} </view>
          </view>
        </view>
        <view>
          <s-search-keyword :placeholder="'搜索班次'" @searchKeyWord="searchKeyWord"></s-search-keyword>
        </view>
      </view>
    </view>

    <!-- 第三块盒子 -->
    <fui-sticky range :top="`${safeAreaInsets?.top + 44}`" >
      <!-- 列表 -->
  
    <view class="fui-title"  :style="{width: `${headstate.width}`}">
        <view class="personnel_head">
          <view class="number_of_people">人数</view>
          <view class="right_box">
            <view v-for="(i, index) in state.tabList" :key="index" class="num_button"
              @click.once="onTabsChange(i, index)">
              <view :class="state.currentTab == index ? 'active' : ''">
                <image :src="`${baseUrl}/uploads/uniapp_image/staff/` + i.activeSrc" mode="scaleToFill"
                  v-if="state.currentTab == index ? false : true" />
                <image :src="`${baseUrl}/uploads/uniapp_image/staff/` + i.src" mode="scaleToFill" v-else />
                <view class="text_size">{{ i.name }}</view>
              </view>
            </view>
          </view>
        </view>
        <view class="screen_box">
          <view class="screen_item" @tap="dropdownStatus">
            <view class="screen_title">
              <up-text :iconStyle='{ color: `#999`, fontSize: `20rpx`, marginLeft: `8rpx` }'
                :suffixIcon="state.suffixIcon" @click="dropdownStatus" :text="dropstatusname"></up-text>
            </view>
            <view class="screen_symbol">

            </view>
          </view>
          <view class="screen_item" @tap="dropdownSex">
            <view class="screen_title">
              <up-text :iconStyle='{ color: `#999`, fontSize: `20rpx`, marginLeft: `8rpx` }'
                :suffixIcon="state.suffixIcons" @click="dropdownSex" :text="dropsexname"></up-text>
            </view>
            <view class="screen_symbol">

            </view>
          </view>
        </view>
    </view>
        <!-- 列表 -->
        <template v-slot:content>
            <view class="area personnel">
              <view class="item" v-for="i in list" :key="i.id">
                <view class="headline">
                  <view class="image">
                    <image :src="`${baseUrl}/uploads/uniapp_image/user/bancidetails_icons_zhizhao.png`" mode="scaleToFill"
                      v-if="i.source == 1" />
                    <image :src="`${baseUrl}/uploads/uniapp_image/user/bancidetails_icons_dailiren.png`" mode="scaleToFill"
                      v-else />
                  </view>
                  <view class="headline_title">{{ i.title }}</view>
                </view>
                <view class="base_message" v-for="(item, index) in i.list" :key="index" @tap="moreSelect(item)">
                  <view class="base_message_left">
                    <view class="image" v-if="fit == true">
                      <image :src="item.is_selected ? `${baseUrl}/uploads/uniapp_image/staff/kehuguanli_icon_check.png` : `${baseUrl}/uploads/uniapp_image/staff/kehuguanli_icon_checkfor.png`
                        " mode="scaleToFill" />
                    </view>
                    <view class="base_image">
                      <image :src="`${baseUrl}` + item.user.avatar" mode="scaleToFill" />
                    </view>
                    <view class="user_message">
                      <view class="messae_top">
                        <view class="name">{{ item.user.nickname }}</view>
                        <view class="gender_age">{{ item.user.gender == 0 ? '女' : '男' }} {{ item.age }}</view>
                        <view class="phone_image">
                          <image @tap="dialPhone(item)" :src="`${baseUrl}/uploads/uniapp_image/staff/class_icon03.png`"
                            mode="scaleToFill" />
                        </view>
                      </view>
                      <view class="punch_data" v-if="item.attendance?.length">
                        <view v-for="(i, index) in item.attendance" :key="index">
                          {{ i.type == 1 ? '上午' : '下午' }}:
                          {{ i.clocking_time }}
                        </view>
                      </view>
                      <view class="punch_data" v-else>
                        <view>暂无打卡数据</view>
                      </view>
                    </view>
                  </view>
                  <view class="registration_time">{{ item.date_format }}报名</view>
                </view>
              </view>
        <!-- 正在加载组件 -->
        <view>
          <s-loadmore-gather :current_page="listPage" :last_page="listlast_page" ref="loadmoreRef"></s-loadmore-gather>
        </view>
            </view>
      </template>
      <!-- </view> -->
   
      <!-- !签到 -->
      <view class="pageBtn">
        <view class="reissueCard" v-if="fit == true">
          <view class="check_all_box">
            <!-- 全选按钮 -->
            <view class="check_all_button" @tap="checkAllInteraction">
              <view class="select_image">
                <image v-if="checkAll === true" :src="`${baseUrl}/uploads/uniapp_image/staff/kehuguanli_icon_check.png`"
                  mode="scaleToFill" />
                <image v-else :src="`${baseUrl}/uploads/uniapp_image/staff/kehuguanli_icon_checkfor.png`"
                  mode="scaleToFill" />
              </view>
              <view>全选</view>
            </view>
            <!-- 已选择 -->
            <view class="selected_box">
              <view class="number_people">已选择 {{ selectedIds.length }}/{{ personLength }} 人</view>
            </view>
          </view>
          <view class="reissueCard_btn">
            <view class="btn" @click="cancel">取消</view>
            <view class="btns" @click="confirm(state.currentTab)">{{ state.currentTab == '0' ? '打卡' : '移除' }}</view>
          </view>
        </view>
        <view class="pageBtn_button" v-else @tap="onShareGoods()">生成签到码</view>
      </view>
      <!-- 弹出选择状态 -->
      <up-action-sheet :show="showStatus" :actions="showStatusActions" title="请选择状态" @close="showStatus = false"
        @select="statusSelect" :round="18" :closeOnClickAction="true"></up-action-sheet>
      <!-- 弹出选择性别 -->
      <up-action-sheet :show="showSex" :actions="showSexActions" title="请选择性别" @close="showSex = false"
        @select="sexSelect" :closeOnClickAction="true" :round="18"></up-action-sheet>
      <!-- 设置金额弹出层 -->
      <s-public-models :show="popshows" :imagesucceedSrc="dataToinformaion.imageSrc"
        :subtitle="dataToinformaion.subtitle" :hint="dataToinformaion.hint" :distinction="dataToinformaion.distinction"
        :editAgency="dataToinformaion.editAgency" :click_type="dataToinformaion.click_type" @cancel="manhourClose"
        @affirm="manhourSubmit" :list="edit_list">
      </s-public-models>
      <!-- 设置上下班弹出层 -->
      <up-popup :show="popup_show" :round="14" mode="center" @close="popup_close">
        <view class="popup_box">
          <!-- 标题文字 -->
          <view class="popup_title">
            一键打卡
          </view>
          <!-- input 输入框 -->
          <view class="popup_input">
            <view class="pop_time">
              <view class="name">打卡时间</view>
              <u--input clearable type="text" disabled :disabledColor="'#F9FAFF'" @tap="demarcation = true"
                placeholder="请选择上下班时间" v-model="demarcation_time" border="none"></u--input>
            </view>
            <view class="hint" v-if="demarcation_time_hint == true">请选择打卡时间</view>
          </view>
          <view class="popup_input">
            <up-radio-group v-model="radiovalue" placement="column" @change="groupChange">
              <up-radio :customStyle="{ marginBottom: '16rpx' }" v-for="(item, index) in radiolist" :key="index"
                :label="item.name" :name="item.value">
              </up-radio>
            </up-radio-group>
          </view>
          <!-- 提示文本 -->
          <view class="hint_text">
            <view class="hint_image">
              <image :src="`${baseUrl}/uploads/uniapp_image/staff/piliangshezhi_icon1@2.png`" mode="scaleToFill" />
            </view>
            <view>批量设置会覆盖已打卡员工的打卡信息</view>
          </view>
          <!-- 按钮集合 -->
          <view class="button_box">
            <view class="left_button" @tap="popup_close">取消</view>
            <view class="right_button" @tap="clockinSubmit">确认</view>
          </view>
        </view>
      </up-popup>
      <!-- 时间选择器 结束时间 -->
      <u-datetime-picker @cancel="cancel_demarcation" @confirm="confirm_demarcation" v-model="value1" :title="'选择时间'"
        :show="demarcation" :format="'YYYY-MM-DD HH:mm'" mode="datetime" @close="close_demarcation"></u-datetime-picker>

    <!-- </view> -->
    </fui-sticky>
  </s-layout>
</template>

<script setup>
import { ref, reactive, computed } from 'vue';
import { baseUrl } from '@/sheep/config';
import { onLoad, onPageScroll, onReachBottom,onPullDownRefresh } from '@dcloudio/uni-app';
import sheep from '@/sheep';
import tools from '@/sheep/helper/tools.js';
import { calculateAge } from '@/utils/fn.js';
import { showShareModal } from '@/sheep/hooks/useModal';
const { safeAreaInsets } = uni.getSystemInfoSync();
//搜索
const value1 = ref(Date.now())
const keyword = ref()
const searchKeyWord = (srarch_value) => {
  checkAll.value = false
  list.value = []
  listpagenumber.value = 1;
  selectedIds.value = []
  keyword.value = srarch_value
  personLength.value = Number(0)
  getScheduleUserIndex()
}
const PopupId = ref()
const date = ref(new Date().toISOString().slice(0, 10))
onLoad((options) => {
  PopupId.value = options.ids
});
onLoad((options) => {
  PopupId.value = options.ids
  listpagenumber.value = 1;
  list.value = []
  getScheduleView()
});
// 日历下渲染数据
const tabs = ref([
  {
    num: '',
    title: '需求人数',
    value: 0,
  },
  {
    num: '',
    title: '有效报名',
    value: 1,
  },
]);
//排版详情
const details = ref()
const getScheduleView = async () => {
  let params = {
    ids: PopupId.value,
  }
  const res = await sheep.$api.project.getScheduleView(params);
  if (res.code == 1) {
    details.value = res.data
    tabs.value[0].num = Number(res.data.man_num) + Number(res.data.woman_num)
    tabs.value[1].num = res.data.join_total
    getScheduleUserIndex()
  }
}
//修改人员代理商金额

// 修改金额
const edit_ids = ref()
const edit_list = ref()
const editagency = (e, a) => {
  edit_ids.value = e.id
  popshows.value = true
  dataToinformaion.value.imageSrc = '/uploads/uniapp_image/staff/piliangshezhi_img_bg2.png'

  dataToinformaion.value.subtitle = '修改需求人数'
  dataToinformaion.value.hint = '修改人数后会覆盖已修改的需求人数'
  dataToinformaion.value.distinction = 'number'
  dataToinformaion.value.click_type = 'number'
  dataToinformaion.value.editAgency = false
  if (e.agent) {
    e.agent.woman_num = e.woman_num
    e.agent.man_num = e.man_num
    edit_list.value = e.agent
  } else {
    edit_list.value = e
  }

}

//工时弹窗
const popshows = ref(false)
const edit_money = ref({

  man_number: Number(0),
  woman_number: Number(0),
})
const dataToinformaion = ref({
  subtitle: '',
  imageSrc: '',
  hint: '',
  distinction: '',
  editAgency: false,
  click_type: ''

})
// 取消按钮
const manhourClose = (e) => {
  edit_money.value = ''
  popshows.value = e


}

// 提交批量更改按钮 此处参数 e 为输入值 参数 i 为判断是什么值 如果为 salary 为批量设置金额 如果为 man_hour 则是批量设置工时
const manhourSubmit = async (e, i, a) => {
  if (i == 'number') {
    let params = {
      ids: edit_ids.value,
    }
    edit_money.value.man_number = Number(e)
    edit_money.value.woman_number = Number(a)
    params.man_num = Number(edit_money.value.man_number)
    params.woman_num = Number(edit_money.value.woman_number)
    const res = await sheep.$api.project.postScheduleEdit(params);
    if (res.code == 1) {
      sheep.$helper.toast(res.msg);
      setTimeout(() => {
        details.value = ''
        getScheduleView()
        popshows.value = false
        edit_money.value.man_number =  Number(0)
        edit_money.value.woman_number =  Number(0)
        dataToinformaion.value.editAgency = true
        dataToinformaion.value.distinction = ''
      }, 500)
    } else {
      sheep.$helper.toast(res.msg);
    }
  }
}
//人员列表

const personLength = ref(Number(0))
const list = ref([])
const getScheduleUserIndex = async () => {
  let params = {
    filter: JSON.stringify({
      'user.nickname': keyword.value,
      'user.gender': gender.value,
      state: '0'
    }),
    op: JSON.stringify({
      'user.nickname': 'LIKE',
      'user.gender': '=',
      state: '='
    }),
    schedule_id: PopupId.value,
    page: listpagenumber.value,
    is_attendance: is_entry.value == undefined ? '' : is_entry.value
  }
  const res = await sheep.$api.project.getScheduleUserIndex(params);
  if (res.code == 1) {
    list.value = [...list.value, ...res?.data.rows];
    listPage.value = res.data.current_page
    listlast_page.value = res.data.last_page
    personLength.value = 0
    list.value.forEach(items => {
      items.list.forEach(item => {
        item.date_format = item.date.split("-")[1] + '.' + item.date.split("-")[2]
        if (item.user.birthday == null) {
          item.age = '无'
        } else {
          item.age = calculateAge(item.user.birthday) + '岁';
        }
      })
      personLength.value = res.data.total
    })
  }
}


// 多选  total.value 总共多少条数据
const moreSelect = (item) => {
  item.is_selected = !(item?.is_selected)
  const index = selectedIds.value.indexOf(item.id);
  if (index === -1) {
    selectedIds.value.push(item.id);
    if (selectedIds.value.length == personLength.value) {
      checkAll.value = true
    }
  } else {
    selectedIds.value.splice(index, 1);
    if (selectedIds.value.length !== personLength.value) {
      checkAll.value = false
    }
  }
}
// 全选
const checkAll = ref(false)
const selectedIds = ref([])
// 全选交互逻辑
const checkAllInteraction = () => {
  selectedIds.value = []
  if (checkAll.value === false) {
    list.value.forEach(item => {
      item.list.forEach(element => {
        selectedIds.value.push(element.user_id);
        element.is_selected = true
      });
    });
  } else {
    list.value.forEach(item => {
      item.list.forEach(element => {
        element.is_selected = false
      });
    });
  }
  checkAll.value = !checkAll.value
}
// 设置上下班弹窗
const popup_show = ref(false)
// 一键补卡提交事
const confirm = async (e) => {
  // 判断时候选择
  if (selectedIds.value.length !== 0 || checkAll.value == true) {
    if (e == 0) {
      popup_show.value = true
    } else {
      const params = {
        ids: selectedIds.value.join(','),
      }
      const res = await sheep.$api.project.postScheduleUserDel(params);
      if (res.code == 1) {
        sheep.$helper.toast(res.msg)
        setTimeout(function () {
          keyword.value = ''
          gender.value = ''
          date.value = ''
          personLength.value = 0
          dropstatusname.value = '考勤状态'
          dropsexname.value = '性别'
          selectedIds.value = []
          checkAll.value = false
          fit.value = false
          state.currentTab = '2'
          demarcation_time.value = ''
          list.value = []
          getScheduleUserIndex()
        }, 500);
      } else {
        sheep.$helper.toast(res.msg)
      }
    }
  } else {
    sheep.$helper.toast('请选择员工，再进行批量操作');
  }
}
// 关闭弹出层
const popup_close = () => {
  demarcation_time.value = ''
  radiovalue.value = '1'
  popup_show.value = false
}
// 上下班打卡选择
const radiolist = reactive([
  {
    name: '上班卡',
    disabled: false,
    value: '1'
  },
  {
    name: '下班卡',
    disabled: false,
    value: '2'
  }
]);
const radiovalue = ref('1');
//上下班打卡时间
const demarcation = ref(false)
const demarcation_time = ref()
const close_demarcation = () => {
  demarcation.value = false
}
const confirm_demarcation = (e) => {
  demarcation_time.value = uni.$u.timeFormat(e.value, 'yyyy-mm-dd hh:MM:ss')
  close_demarcation()
}
const cancel_demarcation = () => {
  demarcation_time.value = ''
  close_demarcation()
}
//上下班选择
const groupChange = (n) => {
  radiovalue.value = n
};

//确认提交
const demarcation_time_hint = ref(false)
const clockinSubmit = async () => {
  if (demarcation_time.value == '' || demarcation_time.value == undefined) {
    demarcation_time_hint.value = true
  } else {
    const params = {
      schedule_id: PopupId.value,
      department_id: details.value.department_id,
      user_ids: selectedIds.value.join(','),
      type: radiovalue.value,
      clocking_time: demarcation_time.value
    }
    const res = await sheep.$api.project.postScheduleAttendanceBatchPunch(params);
    if (res.code == 1) {
      sheep.$helper.toast(res.msg)
      keyword.value = ''
      gender.value = ''
      // date.value=''
      personLength.value = 0
      dropstatusname.value = '考勤状态'
      dropsexname.value = '性别'
      selectedIds.value = []
      checkAll.value = false
      fit.value = false
      state.currentTab = '2'
      setTimeout(function () {
        popup_show.value = false
        demarcation_time.value = ''
        radiovalue.value = '1'
        list.value = []
        getScheduleUserIndex()
      }, 500);

    } else {
      sheep.$helper.toast(res.msg)
    }
  }

}
// 吸顶
// 吸顶
const scrollTop = ref(0);
const headstate = ref({
  bgColor: 'rgba(0,0,0,0)',
  color: '#fff',
  width:''

})
onPageScroll((e) => {
  scrollTop.value = e.scrollTop;
  //  //当距离大于20的时候吸顶
  if (scrollTop.value > 0) {
    headstate.value.bgColor = '#fff'
    headstate.value.color = '#333'
    headstate.value.width = '100%'
  } else {
    headstate.value.bgColor = 'rgba(0,0,0,0)'
    headstate.value.color = '#fff'
    headstate.value.width = 'calc(100% - 40rpx);'
  }
});

// 生成邀请报名打卡
const share = ref({
  title: '',
  address: '',
  date: '',
  id: ''
});
const onShareGoods = () => {
  share.value.title = details.value.title
  share.value.address = details.value.address
  share.value.id = details.value.id
  share.value.date = details.value.date + ' ' + details.value.start_time + '--' + details.value.end_time
  showShareModal();
}
const shareInfo = computed(() => {
  // if (isEmpty(state.value.data)) return {};
  return sheep.$platform.share.getShareInfo(
    {
      title: share.value.title,
      desc: share.value.address,
      params: {
        page: '3',
        query: share.value.id
      },
    },
    {
      type: 'clock_in', // 商品海报
      title: share.value.title,
      desc: share.value.address,
      signUpTime: share.value.date,
    },
  );
});
// 按钮部分渲染数据
const buttonTabs = ref([
  {
    src: 'class_icon02.png',
    title: '薪保障',
    value: 0,
  },
  {
    src: 'class_icon07.png',
    title: '员工打款',
    value: 1,
  },
  {
    src: 'class_icon05.png',
    title: '导出数据',
    value: 2,
  },
]);
const clickEvent = (value) => {
  switch (value) {
    case 0:
      sheep.$helper.toast('暂无开通');
      break;
    case 1:
      sheep.$router.go('/subpackage/staff/project/staff_remit/remit_money', {
        date: details.value.date,
        department_id: details.value.department_id,
        schedule_id: PopupId.value,
      })
      break;
    case 2:
    export_Data()
      break;
  }
}
// 导出数据
const export_Data=async()=>{
  let params ={
        schedule_id: PopupId.value,
  }
  const res = await sheep.$api.project.GETUserlistScheduleid(params);
  if (res.code == 1) {
    uni.showLoading({ title: '读取中' });   
    uni.downloadFile({
        url: `${baseUrl}`+res.data.url,
        success: function (data) {
            if (data.statusCode === 200) {
                uni.getFileSystemManager().saveFile({
                tempFilePath: data.tempFilePath, //临时路径
                filePath: uni.env.USER_DATA_PATH + "/" +  details.value.title, 
                success: function (res) {
                        setTimeout(() => {
                        var filePath = res.savedFilePath;
                            uni.hideLoading();
                            uni.openDocument({   
                            filePath: filePath,
                            fileType: 'xlsx',
                            showMenu: true, // 显示右上角菜单（在小程序中可实现转发等操作）
                            success: function (ress) {
                                // sheep.$helper.toast(ress.errMsg)
                            },
                            fail(err) {
                                console.log(err.errMsg)
                                sheep.$helper.toast(err.errMsg)
                            }
                            });
                        
                    
                        }, 1000)
                    }
                    });
            
                }else{
                    sheep.$helper.toast('服务器资源已删除')
                }
        
        },
        fail: (err) => {
        uni.hideLoading()
        sheep.$helper.toast('导出失败')
        }
    });
  }
  // 
}

//下拉数据
const showSex = ref(false)
const showStatus = ref(false)
const dropdownStatus = () => {
  showStatus.value = true
  state.suffixIcon = 'arrow-up-fill'
}
const dropdownSex = () => {
  showSex.value = true
  state.suffixIcons = 'arrow-up-fill'
}
const dropstatusname = ref('考勤状态')
const dropsexname = ref('性别')
const showSexActions = ref([
  { name: '性别不限', gender: '' },
  { name: '男', gender: 1 },
  { name: '女', gender: 0 },
])
const showStatusActions = ref([
  { name: '考勤状态', is_attendance: '' },
  { name: '未打卡', is_attendance: 0 },
  { name: '已打卡', is_attendance: 1 },
])
// 定义方法  状态
const is_entry = ref()
function statusSelect(e) {
  is_entry.value = e.is_attendance
  dropstatusname.value = e.name
  state.suffixIcon = 'arrow-down-fill'
  showStatus.value = false
  list.value = []
  checkAll.value = false
  listpagenumber.value = 1;
  selectedIds.value = []
  getScheduleUserIndex()
}
//性别
const gender = ref()
function sexSelect(e) {
  gender.value = e.gender
  dropsexname.value = e.name
  state.suffixIcons = 'arrow-down-fill'
  showSex.value = false
  list.value = []
  personLength.value = 0
  list.value = []
  checkAll.value = false
  listpagenumber.value = 1;
  selectedIds.value = []
  getScheduleUserIndex()
}

//补卡 移除
const state = reactive({
  suffixIcon: 'arrow-down-fill',
  suffixIcons: 'arrow-down-fill',
  currentTab: '2',
  tabList: [
    {
      name: '一键打卡',
      value: '0',
      src: 'pk01.png',
      activeSrc: 'pk02.png'
    },
    {
      name: '移除',
      value: '1',
      src: 'icon001.png',
      activeSrc: 'class_icon04.png'
    },
  ],
});

const fit = ref(false)
//补卡删除
const onTabsChange = (i, index) => {
  state.currentTab = i.value;
  if (state.currentTab == i.value) {
    fit.value = true
  }
};
//取消全选、部分选择
const cancel = () => {
  list.value.forEach(item => {
    item.list.forEach(element => {
      element.is_selected = false
    });
  });
  state.currentTab = 3;
  fit.value = false;
  checkAll.value = false
  selectedIds.value = []
};

// 拨打电话
const dialPhone = (item) => {
  tools.callPhone(item.user.mobile)
}



// 状态转译
const state_arr = ref([
  {
    value: 0,
    title: '待开始',
    color: '#0038F7',
  },
  {
    value: 1,
    title: '进行中',
    color: '#35d420',
  },
  {
    value: 2,
    title: '已结束',
    color: '#F70000',
  },
  {
    value: 3,
    title: '已终止',
    color: '#F77500',
  },
  {
    value: 4,
    title: '已作废',
    color: '#000000',
  },
]);
// 加载更多

const listPage = ref()
const listlast_page = ref();
const listpagenumber = ref(1);
const loadmoreRef = ref()
onReachBottom((e)=>{
  loadmoreRef.value.PopupScrolltolower() // 加载更多
  if (listPage.value < listlast_page.value) {
    listpagenumber.value += 1;
    checkAll.value = false
    selectedIds.value = []
    list.value.forEach(item => {
      item.list.forEach((element, index) => {
        element.is_selected = false
      });
    });
  } else {
    return;
  }
  getScheduleUserIndex()
})
onPullDownRefresh(() => {
  listpagenumber.value = 1
  checkAll.value = false
  selectedIds.value = []
  list.value.forEach(item => {
      item.list.forEach((element, index) => {
        element.is_selected = false
      });
    });
    getScheduleUserIndex()
	setTimeout(() => {
		uni.stopPullDownRefresh()
	}, 500);
})
</script>

<style lang="scss" scoped>
@import '@/subpackage/staff/workbench/compentns/up_sheet.scss';

#app {
  background-size: 100%;
  width: 100%;
  min-height: 100%;
  background-repeat: no-repeat;
  background-attachment: fixed;

}

.area {
  margin: 0 20rpx;
}

.placeholder {
  height: 164rpx;
}

// 第一块盒子
.job_information_box {
  margin-bottom: 20rpx;
  background-color: #FFFFFF;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 8rpx 0 rgba(0, 0, 0, 0.05);
  margin-top: 230rpx;

  // 班次时间盒子
  .classes_time_box {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 30rpx 0;
    background-color: #F4F7FF;
    border-top-left-radius: 16rpx;
    border-top-right-radius: 16rpx;
    box-shadow: 0 2rpx 8rpx 0 rgba(0, 0, 0, 0.05);
    font-family: PingFangSC;
    color: #0038F7;
    font-weight: 600;
    font-size: 26rpx;
    font-style: normal;

    .edge_distance {
      margin: 0 20rpx 0 18rpx;
    }

    .image {
      height: 36rpx;
      width: 36rpx;

      image {
        width: 100%;
        height: 100%;
      }
    }
  }

  // 信息盒子
  .message_box {
    padding: 30rpx 30rpx 20rpx 30rpx;

    .message {
      padding-bottom: 22rpx;
      border-bottom: 2rpx solid #EFEFEF;

      .message_title {
        font-family: PingFangSC;
        color: #333333;
        font-weight: 700;
        font-size: 32rpx;
        font-style: normal;
        text-decoration: none;
        text-align: left;
        margin-bottom: 20rpx;
      }

      .message_item {
        display: flex;
        align-items: center;
        margin-bottom: 20rpx;
        font-family: PingFangSC;
        font-weight: 600;
        font-size: 24rpx;

        .demand_people {
          display: flex;
          align-items: center;
          margin-right: 10rpx;
          view{ margin-right: 10rpx;}
        }

        .distance {
          margin-right: 10rpx;
        }

        .message_image {
          margin-left: 20rpx;
          display: flex;
          align-items: center;

          image {
            width: 26rpx;
            height: 26rpx;
          }
        }
      }
    }

    .quantity {
      display: flex;
      align-items: center;
      justify-content: space-around;

      .tabs_box {
        margin-top: 22rpx;

        .tabs_num {
          color: #999999;
          font-family: PingFangSC;
          color: #0038F7;
          font-weight: 600;
          font-size: 40rpx;
          font-style: normal;
          text-decoration: none;
          text-align: center;
        }

        .tabs_title {
          color: #999999;
          font-family: PingFangSC;
          color: #333333;
          font-weight: 600;
          font-size: 28rpx;
          font-style: normal;
          text-decoration: none;
        }
      }
    }
  }
}

// 第二块盒子
.button_box {
  padding: 30rpx 20rpx 20rpx 20rpx;
  background-color: #FFFFFF;
  border-radius: 16rpx;
  box-shadow: 0rpx 2rpx 8rpx 0rpx rgba(0, 0, 0, 0.05);
  margin-bottom: 20rpx;

  .buttons {
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin-bottom: 20rpx;

    .buttons_item {
      image {
        width: 80rpx;
        height: 80rpx;
      }

      .text {
        font-family: PingFangSC;
        color: #333333;
        font-weight: 500;
        font-size: 22rpx;
        font-style: normal;
        text-decoration: none;
        text-align: center;
      }
    }
  }
}

// 第三块盒子
.personnel {
  padding: 32rpx 30rpx 30rpx 30rpx;
  background-color: #FFFFFF;
  border-bottom-left-radius: 16rpx;
  border-bottom-right-radius: 16rpx;
  box-shadow: 0rpx 2rpx 8rpx 0rpx rgba(0, 0, 0, 0.05);



  .headline {
    display: flex;
    align-items: center;
    margin-top: 30rpx;

    .image {
      width: 26rpx;
      height: 26rpx;
      display: flex;
      margin-right: 20rpx;

      image {
        width: 100%;
        height: 100%;
      }
    }

    .headline_title {
      font-size: 26rpx;
      font-weight: 650;
    }
  }

  .base_message {
    display: flex;
    align-items: center;
    margin-top: 30rpx;

    justify-content: space-between;

    .base_message_left {
      display: flex;
      align-items: center;

      .image {
        width: 30rpx;
        height: 30rpx;
        display: flex;
        margin-right: 20rpx;

        image {
          width: 100%;
          height: 100%;
        }
      }

      .base_image {
        width: 104rpx;
        height: 104rpx;
        background-color: pink;
        border-radius: 50%;
        margin-right: 16rpx;

        image {
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
      }

      .user_message {
        .messae_top {
          display: flex;
          align-items: center;

          .name {
            font-family: PingFangSC;
            color: #333333;
            font-weight: 600;
            font-size: 30rpx;
            font-style: normal;
            text-decoration: none;
            text-align: left;
            margin-right: 20rpx;
          }

          .gender_age {
            font-family: PingFangSC;
            color: #999999;
            font-weight: 500;
            font-size: 26rpx;
            font-style: normal;
            text-decoration: none;
            text-align: left;
            margin-right: 14rpx;
          }

          .phone_image {
            width: 32rpx;
            height: 32rpx;

            image {
              width: 100%;
              height: 100%;
            }
          }
        }

        .punch_data {
          font-family: PingFangSC;
          color: #333333;
          font-weight: 500;
          font-size: 24rpx;
          font-style: normal;
          text-decoration: none;
          text-align: left;
          margin-top: 10rpx;
          display: flex;

          view {
            margin-right: 10rpx;
          }
        }
      }

    }

    .registration_time {
      font-family: PingFangSC;
      color: #0038F7;
      font-weight: 600;
      font-size: 24rpx;
      font-style: normal;
      text-decoration: none;
    }
  }


}
.orange {
    color: #ff6600;
  }

  .blue {
    color: #0038F7;
  }

  .black {
    color: #000000;
  }

  .gray {
    color: #666666;
  }

  .light_grey {
    color: #999999;
    font-weight: 600;
    font-size: 22rpx;
  }

  .margin_left {
    margin-left: 10rpx;
  }

// 签到按钮
.pageBtn {
  position: fixed;
  bottom: 0;
  ;
  left: 0;
  width: 100%;
  height: auto;
  background: $uni-bg-color;
  z-index: 9999;
  padding-bottom: 100rpx;
  padding-bottom: env(safe-area-inset-bottom) !important;

  .pageBtn_button {
    margin: 25rpx auto 10rpx auto;
    width: 670rpx;
    height: 90rpx;
    border-radius: 50rpx;
    color: $uni-bg-color;
    font-size: 34rpx;
    text-align: center;
    line-height: 90rpx;
    border: none;
    background: linear-gradient(90deg, rgba(0, 56, 247, 1) 0%, rgba(77, 139, 255, 1) 100%);
  }

  .reissueCard {
    .bottom-text {
      margin-left: 20rpx;
      height: 70rpx;
      line-height: 70rpx;
      margin-bottom: 20rpx;
    }

    .reissueCard_btn {
      display: flex;
      justify-content: space-around;

      .btn {
        width: 315rpx;
        height: 90rpx;
        border-radius: 50rpx;
        border: 2rpx solid $uni-color-primary;
        color: $uni-color-primary;
        font-size: 34rpx;
      }

      view {
        text-align: center;
        line-height: 90rpx;
        ;
      }

      .btns {
        width: 315rpx;
        height: 90rpx;
        border-radius: 50rpx;
        color: $uni-bg-color;
        font-size: 34rpx;
        background: linear-gradient(90deg, rgba(0, 56, 247, 1) 0%, rgba(77, 139, 255, 1) 100%);
      }
    }
  }
}

// 全选图标
.select_image {
  width: 30rpx;
  height: 30rpx;
  margin-right: 20rpx;

  image {
    width: 100%;
    height: 100%;
  }
}

// 全选按钮盒子
.check_all_box {
  height: 90rpx;
  width: 100%;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;

  // 全选按钮
  .check_all_button {
    display: flex;
    align-items: center;
    margin-left: 52rpx;
    font-family: PingFangSC;
    color: #0239f7;
    font-weight: $uni-font-weight;
    font-size: $uni-font-size-base;
    font-style: normal;
    text-decoration: none;
  }

  // 已选择
  .selected_box {
    display: flex;
    margin-right: 40rpx;
    align-items: center;
    font-family: PingFangSC;
    color: $uni-text-color;
    font-weight: $uni-font-weight;
    font-size: $uni-font-size-base;
    font-style: normal;
    text-decoration: none;
  }
}

// 弹出层
.popup_box {
  width: 600rpx;
  height: 590rpx;
  border-radius: 28rpx;
  background-color: #FFFFFF;
  position: relative;


  // 标题文字
  .popup_title {
    font-family: PingFangSC;
    color: $uni-text-color;
    font-weight: $uni-font-weight;
    font-size: 40rpx;
    font-style: normal;
    text-decoration: none;
    margin-top: 50rpx;
    margin-bottom: 45rpx;
    text-align: center;
  }

  :deep(.u-radio-group--column) {
    flex-direction: row !important;
    justify-content: space-between;
    width: 76%;
  }

  // 输入框
  .popup_input {
    height: 96rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 28rpx;
    background-color: #F4F6FA;
    box-shadow: 0rpx 2rpx 8rpx 0rpx rgba(0, 0, 0, 0.05);
    margin: 0 40rpx;
    margin-bottom: 35rpx;
    position: relative;

    .pop_time {
      display: flex;
      height: 96rpx;
      align-items: center;

      .name {
        margin-right: 10rpx;
      }
    }

    .hint {
      position: absolute;
      right: 30rpx;
      bottom: -30rpx;
      z-index: 10;
      color: red;
      font-size: 22rpx;
    }
  }

  // 提示文本
  .hint_text {
    display: flex;
    align-items: center;
    height: 32rpx;
    font-family: PingFangSC;
    color: $uni-color-primary;
    font-weight: $uni-font-weight;
    font-size: 22rpx;
    font-style: normal;
    text-decoration: none;
    margin-bottom: 40rpx;

    .hint_image {
      width: 26rpx;
      height: 26rpx;
      margin-right: 10rpx;
      margin-left: 60rpx;

      image {
        width: 100%;
        height: 100%;
      }
    }
  }

  // 按钮集合
  .button_box {
    display: flex;

    .left_button {
      width: 50%;
      height: 82rpx;
      text-align: center;
      line-height: 82rpx;
      border-radius: 45rpx;
      border: 4rpx solid $uni-color-primary;
      font-family: PingFangSC;
      color: $uni-color-primary;
      font-weight: $uni-font-weight;
      font-size: 34rpx;
      font-style: normal;
      text-decoration: none;
      margin-left: 40rpx;
      margin-right: 20rpx;
    }

    .right_button {
      width: 50%;
      height: 90rpx;
      text-align: center;
      line-height: 90rpx;
      border-radius: 45rpx;
      background: linear-gradient(90deg, rgba(0, 56, 247, 1) 0%, rgba(77, 139, 255, 1) 100%);
      font-family: PingFangSC;
      color: #FFFFFF;
      font-weight: $uni-font-weight;
      font-size: 34rpx;
      font-style: normal;
      text-decoration: none;
      margin-right: 40rpx;
      margin-left: 20rpx;
    }
  }
}
.fui-title{
  padding: 32rpx 0rpx 0rpx 0rpx;
  background-color: #FFFFFF;
  border-top-left-radius: 16rpx;
  border-top-right-radius: 16rpx;
 
  margin:0 auto;
}
.personnel_head {
  padding: 0 30rpx 32rpx 30rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1rpx solid #eeeeee78;

    .number_of_people {
      font-family: PingFangSC;
      color: #000000;
      font-weight: 600;
      font-size: 28rpx;
      font-style: normal;
      text-decoration: none;
      text-align: left;
    }

    .right_box {
      display: flex;
      align-items: center;
    }

    .num_button {
      view {
        display: flex;
        align-items: center;
      }

      .text_size {
        font-family: PingFangSC;
        color: #333333;
        font-weight: 550;
        font-size: 28rpx;
        font-style: normal;
        text-decoration: none;
        text-align: left;
      }

      image {
        width: 40rpx;
        height: 40rpx;
        margin: 0rpx 10rpx 0rpx 30rpx;
      }
    }
  }

  .screen_box {
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding-bottom: 20rpx;
    border-bottom: 1rpx solid #eeeeee78;
   
    width: 90%;
    margin: 24rpx auto 0 auto;
}

    .screen_item {
      display: flex;
      align-items: center;

      .screen_title {
        :deep(.u-text__value) {
          font-family: PingFangSC;
          color: #666666;
          font-weight: 500;
          font-size: 24rpx !important;
          font-style: normal;
          text-decoration: none;
          text-align: right;
          margin-right: 4rpx;
        }

      }
    }
    :deep(.navbar) {
      .u-icon__icon {
          background: #fff;
          width: 64rpx;
          height: 64rpx;
          justify-content: center;
          border-radius: 50%;
          color: #333 !important;
        } 
    }
    
</style>